<template>
	<view class="article u-f animate__animated animate__slideInLeft animate__fast">
		<!-- 作者 -->
		<view class="article__author u-f">
			<view class="article__author--title">
				<image :src="item.user.userpic" mode="widthFix"></image>
				<text class="article__author--nick">{{item.user.username}}</text>
				<tabSexAge :sex="item.user.sex" :age="item.user.age"/>
			</view>
			<view class="article__author__right u-f-ac">
				<view class="article__author--add u-f-ac" v-show="!item.guangzhu" @tap="guanzhu">
					<text class="icon iconfont icon-tianjia" style="font-size: 26upx;"></text>
					<text>关注</text>
				</view>
				<text class="icon iconfont icon-tianjia remove"></text>
			</view>
		</view>
		<view class="article__author__p">
			<!-- 标题 -->
			<view class="article__title u-f-ac" @tap="opendetails">
				<text>{{item.title}}</text>
			</view>
			<!-- 图片 -->
			<view class="article__content"  @tap="opendetails">
				<!-- 图片 -->
				<image v-if="item.titlepic!=''" :src="item.titlepic" mode="widthFix"></image>
				<!-- <text class="article__content__play icon iconfont icon-bofang3"></text> -->
			<!-- 	<text class="article__content__PlayInfo">
					{{item.playnum}}播放 {{item.long}}
				</text> -->
			</view>
			<!-- 点赞和转发 -->
			<view class="article__footer u-f-ac">
				<view>
					<!-- 点赞 -->
					<view :class="{'active':item.support?.type==1}" @tap="caozuo('dianzan')">
						<text class="icon iconfont icon-xiaolian1"></text>
						<text>{{item.dingCount}}</text>
					</view>
					<!-- 👎 -->
					<view :class="{'active':item.support?.type==2}" @tap="caozuo('cai')">
						<text class="icon iconfont icon-kulian"></text>
						<text>{{item.caiCount}}</text>
					</view>
				</view>
				<view>
					<!-- 评论 -->
					<view>
						<text class="icon iconfont icon-pinglun"></text>
						<text>{{item.commentCount}}</text>
					</view>
					<!-- 转发 -->
					<view>
						<text class="icon iconfont icon-zhuanfa"></text>
						<text>{{item.sharenum}}</text>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script setup>
	import tabSexAge from'../common/tag-sex-age.vue';
	import {ref,onMounted} from 'vue';
	import {setPostZanApi} from '../../api/postApi.js';
	import {setUserApi} from '../../api/followApi.js';
	const props = defineProps({
		item: {
			type: Object,
			require: true,
		},
		
	})
	
	
	const isDian = ref(0);// 0 未点击 1 点赞 2 踩 

	// 关注
	function guanzhu(e) {
		
		setUserApi(props.item.user.id).then(res=>{
			props.item.guangzhu = true;
			uni.showToast({
				title: '关注成功'
			});
		})
			
		
	}
	// 点赞
	function caozuo(val) {
		if(!props.item.support){
			props.item.support={
				type:0
			}
		}
		if (val == "dianzan") {
			
			setPostZanApi(props.item.id,isDian.value==1?0:1).then(res=>{
				console.log(props.item.support.type)
				props.item.support.type=isDian.value==1?0:1;
				
				//判断是否点击过
				if (isDian.value == 1) {
					isDian.value = 0;
					props.item.dingCount--;
				} else if (isDian.value == 2) {
					isDian.value = 1
					props.item.dingCount++;
					props.item.caiCount--;
				} else {
					isDian.value = 1
					props.item.dingCount++;
				}
			})
			return;
		}

		
		
		setPostZanApi(props.item.id,isDian.value==2?0:2).then(res=>{
			console.log(res)
			props.item.support.type=isDian.value==2?0:2;
			//判断是否点击过
			if (isDian.value == 2) {
				isDian.value = 0;
				props.item.caiCount--;
			} else if (isDian.value == 1) {
				isDian.value = 2
				props.item.caiCount++;
				props.item.dingCount--;
			} else {
				isDian.value = 2;
				props.item.caiCount++;
			}
		})

	}
	
	// 详情页面
	function opendetails(){
		uni.navigateTo({
			url:"/pages/detail/detail?id="+props.item?.id+'&title'+props.item.title
		})
	}
	
	onMounted(()=>{
		if(props.item.support){
			isDian.value=props.item.support.type==1?1:2;	
		}
	})
</script>

<style scoped>
	@import '../../common/list.css';
</style>
